<template>
	<view class="find-scen bg-white">
		<!--标题栏-->
		<bar-title  bgColor='bg-white'>
			<block slot="content">找剧本</block>
			<block slot="right">
				<view class="filter-box"
					@tap="showModal" 
					data-target="filterModal"
				>
					<text class="cuIcon-filter" />
				</view>
			</block>
		</bar-title>
		
		
		<view class="cu-bar bg-white search" :style="[{top: barHeight + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索相关内容"
					:adjust-position="false"
					v-model.trim="keywords"
					confirm-type="search"
					@confirm="toSearch"
				></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round"
					@click="toSearch"
				>搜索</button>
			</view>
		</view>
		
		
		<view class="scen-container">
			<block v-for="(info,index) in scenList" :key="index">
				<ViewScen :scen-info="info"></ViewScen>
			</block>
			
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		
		<!-- 侧边栏 -->
		<scenFilter
		    :show="modalName=='filterModal'"
		    @closeTap="hideModal"
		    @affirmTap="affirmTap"
		    @resetConfig="resetConfig"
			
		></scenFilter>
	</view>
</template>



<script>
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import scenFilter from '@/components/app/scenFilter.vue';
import ViewScen from '@/components/box/ViewScen.vue';
import { Scen } from '@/models/scen.js';
export default {
	components: {
		uniLoadMore,
		scenFilter,
		ViewScen
	},
	data() {
		return {
			keywords: '',
			modalName: '',
			pagenum: 1,
			loadingType: 'more',
			scenList:[],
			otherParams: {},
		}
	},
	computed: {
		barHeight(){
			console.log(this.systemInfo.navigationBarHeight,this.systemInfo.statusBarHeight);
			return 50 + this.systemInfo.statusBarHeight;
		}
	},
	onLoad() {
		this.getMoreData({
			pagenum: 1
		})
	},
	methods: {
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		async getMoreData(params) {
			this.loadingType = 'loading'
			let scenList = await Scen.findScen(params)
			this.scenList = this.scenList.concat(scenList)
			if (scenList.length < 20) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		},
		resetConfig() {
			this.otherParams = {}
		},
		affirmTap(config) {
			this.otherParams = config
			this.pagenum = 1
			this.scenList = []
			this.getMoreData({
				pagenum: this.pagenum,
				...config
			})
		},
		toSearch(){
            if (this.keywords === "") {
				this.$mTool.showToast({
					title: '搜索词不能为空',
					icon: 'none'
				})
                return
            }
			this.pagenum = 1
			this.scenList = []
			let params = Object.assign(this.otherParams, {
				pagenum: this.pagenum,
				searchplay: this.keywords
			});
			console.log(this.otherParams);
			this.getMoreData(params)
		}
	},
	onReachBottom(e) {
		if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
		    return
		}
		this.pagenum = this.pagenum + 1
		let params = Object.assign(this.otherParams, {
			pagenum: this.pagenum
		});
		console.log(this.otherParams);
		this.getMoreData(params)
	},
}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.search{
		position: sticky;
		z-index: 10;
	}
	.filter-box{
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
	}
</style>

